import { Key, useState } from 'react';
import { Button, Space } from 'antd';
import { selectList, selectTaskPage, type TaskPageParam, type ListItemRes } from '@/service/test';
import { tableColumn, searchConfig } from './config';
import TablePro, { type RequestFn } from '@/components/TablePro';

export const trimSlashes = (str: string) =>
	`/${str
		.split('/')
		.filter((v) => v !== '')
		.join('/')}/v1`;

const NewTablePro = () => {
	const formRef = TablePro.useSearchForm();
	const tableRef = TablePro.useTableProRef();
	const [selectedKeys, setSelectedKeys] = useState<Key[]>([]);

	const queryList: RequestFn<ListItemRes, TaskPageParam> = async (page, params) => {
		const { data } = await selectList();
		return { list: data };
	};

	console.log(trimSlashes('abc/cbz'));

	return (
		<TablePro<ListItemRes, TaskPageParam>
			tableName="测试"
			size="small"
			tableRef={tableRef}
			columns={tableColumn}
			formRef={formRef}
			search={searchConfig}
			formConfig={{ labelWidth: 100 }}
			request={queryList}
			toolbar={
				<Space>
					<Button
						type="primary"
						ghost
						onClick={() => formRef.current.setFieldValue('title', '123')}
					>
						设置筛选值
					</Button>
					<Button type="primary" ghost onClick={() => tableRef.current.reload()}>
						刷新
					</Button>
				</Space>
			}
			rowSelection={{
				selectedRowKeys: selectedKeys,
				onChange: (selectedKeys) => {
					setSelectedKeys(selectedKeys);
				}
			}}
			onPageChange={() => {
				console.log('onPageChange');
				setSelectedKeys([]);
			}}
			renders={{
				handler: (value, record) => (
					<Space>
						<Button type="primary" size="small">
							详情
						</Button>
						<Button type="primary" size="small" danger>
							删除
						</Button>
					</Space>
				)
			}}
		/>
	);
};

export default NewTablePro;
